<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>
        .container {
            width: 1024px;
            margin: 100px auto;
        }

        .container table {
            width: 100%;
        }

    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app" class="container">
    <table class="table table-hover table-striped">
        <thead>
        <tr>
            <th>No</th>
            <th>Name</th>
            <th>Details</th>
            <th>Price</th>
            <th style="width: 200px">Operations</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="p in products">
            <td>{{ p.id }}</td>
            <td>{{ p.name }}</td>
            <td>{{ p.details }}</td>
            <td>{{ p.price | toCurrency }}</td>
            <td>
                <a href="#" class="btn btn-link" v-on:click="deleteProduct(p)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script type="application/javascript">
    Vue.filter('toCurrency', function (value) {
        if (typeof value !== "number") {
            return value;
        }
        let formatter = new Intl.NumberFormat('en-US', {
            style: 'currency',
            currency: 'USD',
            minimumFractionDigits: 2
        });
        return formatter.format(value);
    });

    function findAllProducts() {
        axios.get('/products')
            .then(response => {
                let result = response.data;
                if (result.success) {
                    this.products = result.data;
                } else {
                    alert(result.message);
                    this.products = [];
                }
            });
    }

    new Vue({
        el: '#app',
        data: {
            products: []
        },
        methods: {
            deleteProduct: function (product) {
                axios.delete('/products/' + product.id)
                    .then(response => {
                        console.dir(response);
                        this.products = this.products.filter(p => p.id !== product.id);
                    });
            }
        },
        created: function () {
            axios.get('/products')
                .then(response => {
                    let result = response.data;
                    if (result.success) {
                        this.products = result.data;
                    } else {
                        alert(result.message);
                        this.products = [];
                    }
                });
            // this.products = [
            //     {id: 1, name: 'AAA', details: 'bbb', online: true, price: 100},
            //     {id: 2, name: 'AAA', details: 'bbb', online: true, price: 100},
            //     {id: 3, name: 'AAA', details: 'bbb', online: true, price: 100},
            //     {id: 4, name: 'AAA', details: 'bbb', online: true, price: 100},
            //     {id: 5, name: 'AAA', details: 'bbb', online: true, price: 100}
            // ];
        }
    });
</script>
</body>
</html>